<!--
厦门大学计算机专业 | 华为开发专家(HDE)
专注《零基础学编程系列》  http://lblbc.cn/blog
包含：鸿蒙 | Java | 安卓 | 前端 | Flutter | iOS | 小程序
公众号：蓝不蓝编程
-->
<template>
  <view class="column">
    <view class="row">
      <!-- 直接显示 num1 到 num7 -->
      <view class="num">{{ num1 }}</view>
      <view class="num">{{ num2 }}</view>
      <view class="num">{{ num3 }}</view>
      <view class="num">{{ num4 }}</view>
      <view class="num">{{ num5 }}</view>
      <view class="num">{{ num6 }}</view>
      <view class="num">{{ num7 }}</view>
    </view>
    <button class="button" @click="createNums">生成</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      num1: '0',
      num2: '0',
      num3: '0',
      num4: '0',
      num5: '0',
      num6: '0',
      num7: '0',
    };
  },
  methods: {
    createNums() {
      let numbers = Array.from({ length: 33 }, (_, i) => i + 1);
      numbers.sort(() => 0.5 - Math.random()); // 打乱数组

      this.num1 = numbers[0].toString();
      this.num2 = numbers[1].toString();
      this.num3 = numbers[2].toString();
      this.num4 = numbers[3].toString();
      this.num5 = numbers[4].toString();
      this.num6 = numbers[5].toString();
      this.num7 = this.random(16).toString();
    },
    random(maxNum) {
      return Math.floor(Math.random() * maxNum) + 1;
    },
  },
};
</script>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.num {
  height: 40px;
  width: 40px;
  font-size: 16px;
  border-radius: 20px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
}

.button {
  color: white;
  background-color: #489cf5;
  width: 100px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  cursor: pointer;
}
</style>